<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>

    <div id="root">
        <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
    </div>
    <!-- <div id="root">
        <h1>Hello,{{address}}</h1></h1>
    </div> -->
    <script>
        // 总结：
        // 1.想让vue工作就必须创建一个vue实例，且要传入一个配置对象
        // 2.root容器里面的代码依然符合html规范，只不过混入了一些特殊的vue语法
        // 3.root容器里面的代码被称为vue模版
        // 4.Vue实例适合容器一一对应的
        // 5.真实开发中只有一个vue实例，并且会配合组件使用
        // 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
        // 7.一旦data中的数据发生改变，那么模版中用到该数据的地方也会自动更新

        // 注意区分：js表达式和js代码（语句）
        //         表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
        //                 eg：a
        //                 eg：a+b
        //                 eg：demo（1）
        //         js代码：
        //                 eg：if(a>0){}
        //                 eg：for（）

        Vue.config.productionTip = false;
        Vue.config.devtools = true
        new Vue({
            el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            // el:document.getElementById('root')
            data:{
                name:'zhangsan',
                address:'hahahha'      
            }
        })
        // new Vue({
        //     el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
        //     // el:document.getElementById('root')
        //     data:{
        //         address:'haha'           
        //     }
        // })



    </script>
</body>
</html>